<template>
  <div class="page">
    <mu-appbar :zDepth="0" class="header" title="框架控件">
      <mu-icon-button icon="arrow_back_ios" slot="left" @click="goBack"/>
    </mu-appbar>
    <div class="content">
      <es-scroll :style="{height:ui.scrollHeight}">
        <mu-list>
          <mu-list-item v-for="item in model.list" titleClass="white" :title="item.name" :to="item.path">
          </mu-list-item>
        </mu-list>
      </es-scroll>
    </div>

  </div>
</template>

<script>
  export default{
    name: '',
    data(){
      return {
        ui: {
          scrollHeight: $screen.height - 56 + 'px'
        },
        model: {
          list: [{
            path: '/Sub/FrameworkDemo/LifeCicle',
            name: 'LifeCicle',
          },
            {
              path: '/Sub/FrameworkDemo/CardDemo',
              name: 'CardDemo',
            },
            {
              path: '/Sub/FrameworkDemo/CollectionLayoutDemo',
              name: 'CollectionLayoutDemo',
            },
            {
              path: '/Sub/FrameworkDemo/EChartDemo',
              name: 'EChartDemo',
            },
            {
              path: '/Sub/FrameworkDemo/GridLayoutDemo',
              name: 'GridLayoutDemo',
            },
            {
              path: '/Sub/FrameworkDemo/LoadingDemo',
              name: 'LoadingDemo',
            },
            {
              path: '/Sub/FrameworkDemo/NavLayoutDemo',
              name: 'NavLayoutDemo',
            },
            {
              path: '/Sub/FrameworkDemo/PageLayoutDemo',
              name: 'PageLayoutDemo',
            }
            , {

              path: '/Sub/FrameworkDemo/ScrollExDemo',
              name: 'ScrollExDemo',
            },
            {
              path: '/Sub/FrameworkDemo/StackLayoutDemo',
              name: 'StackLayoutDemo',
            }


          ]

        }
      }
    },
    methods: {
      goBack(){
        this.$router.go(-1)
      }

    },
    beforeCreate(){

    },
    created(){

    },
    beforeUpdate(){

    },
    updated(){

    },
    beforeMount(){

    },
    mounted(){

    },
    beforeDestroy(){

    },
    destroyed(){

    },
    activated(){

    },
    deactivated(){

    }
  }


</script>

<style scoped>

  .main {
    width: 100%;
    height: 100%;
    position: fixed;
  }

  .header {
    width: 100%;
    position: fixed;
    top: 0px;
  }

  .content {
    position: fixed;
    top: 56px;
    width: 100%;
    height: calc(100% - 56px - 56px);
  }

  .item {
    height: 120px;
    padding-top: 60px;
    font-size: 16px;
  }

  .item2 {
    height: 60px;
  }

  .item i {
    display: block;
  }

  .item span {
    margin-top: 12px;
    display: block;
  }

  .bigTitle {
    background-color: rgba(160, 160, 160, 0.2);
    height: 30px;
    text-align: left;
    line-height: 30px;
    padding-left: 12px;
  }
</style>
